{% extends 'base.html' %}

{% load comments %}
{% load forum_tags %}
{% load follow_tags %}

{% block main %}
    <main class="col-md-8 mb-1">
        <div class="card card-block">
            <div class="media">
                <div class="media-left">
                    <img class="media-object" src="{{ user.mugshot_thumbnail.url }}" alt=""
                         style="width: 73px;">
                </div>
                <div class="media-body">
                    <h3 class="media-heading">{{ user.nickname }}</h3>
                    <p>{{ user.signature }}</p>
                    <div>django forum demo 第 {{ user.pk }} 号会员，加入于 {{ user.date_joined }}</div>
                    {% if request.user != user %}
                        {% is_following request.user user 'follow' as follow_flag %}
                        <button class="btn btn-sm btn-outline-info mt-1
                            {% if follow_flag %} unfollow-btn{% else %} follow-btn{% endif %}"
                                data-contenttype-id="{{ user|get_ctype_pk }}"
                                data-object-id="{{ user.pk }}">
                            <a href="">
                                {% if follow_flag %}
                                    <i class="fa fa-check" aria-hidden="true"></i> 已关注
                                {% else %}
                                    <i class="fa fa-plus" aria-hidden="true"></i> 关注
                                {% endif %}
                            </a>
                        </button>
                    {% endif %}
                    <a class="btn btn-sm btn-secondary mt-1" role="button"
                       href="{% url 'users:followers' user.username %}"><span
                            class="follow-number">{{ user|follower_count:'follow' }}</span>
                        人关注</a>
                </div>
            </div>
        </div>
        <ul class="list-group mb-1">
            <li class="list-group-item">
                {{ user.nickname }} 发布的所有帖子
            </li>
            {% for post in post_list %}
                <li class="list-group-item">
                    {% include 'users/_user_post_item.html' %}
                </li>
            {% empty %}
                <li class="list-group-item">该用户下没有帖子</li>
            {% endfor %}
            {% if not post_list.count < 10 %}
                <li class="list-group-item small"><a href="{% url 'users:posts' user.username %}"
                                                     class="text-muted">{{ user.nickname }}
                    发布的更多帖子>></a></li>
            {% endif %}
        </ul>
        <ul class="list-group">
            <li class="list-group-item">
                {{ user.nickname }} 最近回复了
            </li>
            {% for reply in reply_list %}
                {% include 'users/_user_reply_item.html' %}
            {% empty %}
                <li class="list-group-item">该用户下没有回复</li>
            {% endfor %}
            {% if not reply_list.count < 10 %}
                <li class="list-group-item small"><a href="{% url 'users:replies' user.username %}"
                                                     class="text-muted">{{ user.nickname }}
                    创建的更多回复>></a></li>
            {% endif %}
        </ul>
    </main>
{% endblock main %}

{% block aside %}
    <aside class="col-md-4">
        {% if request.user.is_authenticated %}
            <ul class="list-group mb-2">
                <li class="list-group-item font-weight-bold">
                    用户最新动态
                </li>

                {% for act in action_list %}
                    <li class="list-group-item">
                        {{ act|action }}
                    </li>
                {% empty %}
                    <li class="list-group-item">该用户下没有动态</li>
                {% endfor %}
                {% if not action_list.count < 20 %}
                    <li class="list-group-item small"><a href="{% url 'users:actions' user.username %}"
                                                         class="text-muted">{{ user.nickname }}
                        的全部动态>></a></li>
                {% endif %}
            </ul>
        {% else %}
            <div class="card card-block">
                需要登录才能查看用户动态
            </div>
        {% endif %}
    </aside>
{% endblock aside %}

{% block script %}
    <script>
        function follow(e) {
            var $this = $(this);
            var $ctypeId = $this.attr('data-contenttype-id');
            var $objectId = $this.attr('data-object-id');
            var $url = '/follows/follow_all/' + $ctypeId + '/' + $objectId + '/follow/';
            $.post(
                $url,
                {
                    content_type_id: $ctypeId,
                    object_id: $objectId,
                    ftype: 'follow'
                },
                function (data, status) {
                    $this.find('a').first().html('<i class="fa fa-check" aria-hidden="true"></i> 已关注');
                    var $followNumber = $this.next().first().find('.follow-number').first();
                    $followNumber.text(parseInt($followNumber.text()) + 1);
                    $this.off('click');
                    $this.on('click', unfollow)
                }
            );
            e.preventDefault();
        }

        function unfollow(e) {
            var $this = $(this);
            var $ctypeId = $this.attr('data-contenttype-id');
            var $objectId = $this.attr('data-object-id');
            var $url = '/follows/unfollow_all/' + $ctypeId + '/' + $objectId + '/follow/';
            $.post(
                $url,
                {
                    content_type_id: $ctypeId,
                    object_id: $objectId,
                    ftype: 'follow'
                },
                function (data, status) {
                    $this.find('a').first().html('<i class="fa fa-plus" aria-hidden="true"></i> 关注');
                    var $followNumber = $this.next().first().find('.follow-number').first();
                    $followNumber.text(parseInt($followNumber.text()) - 1);
                    $this.off('click');
                    $this.on('click', follow)
                }
            );
            e.preventDefault();
        }

        $('.follow-btn').on('click', follow);
        $('.unfollow-btn').on('click', unfollow);
    </script>
{% endblock script %}